<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">余额提现</block>
		</cu-custom>

		<view class="bg-white margin radius padding-lr">
			<view class="cu-bar  text-lg tet-bold">提现余额</view>
			
			<view class="cu-form-group solid-bottom">
				<input placeholder-class="left-input-holder" type="number" class="left-input" placeholder="输入提现余额" v-model="formData.cash"></input>
				<view class="checkall" @tap="checkAll">全部提现</view>
			</view>
			
			<view class="text-gray margin-tb-sm padding-bottom">当前可提现余额{{member?member.account.user_money:'0'}}
			<view @tap="goPage('/pages/income/cash_list')" style="float: right;">查看提现记录</view>
			</view>
		</view>
		
		<!-- <view class="cu-form-group margin-top">
			<view class="title">提现方式</view>
			<picker @change="PaymentPickerChange" :value="payment_index" :range="paymentPicker">
				<view class="picker">
					{{payment_index>=0?paymentPicker[payment_index]:'请选择支付方式'}}
				</view>
			</picker>
		</view> -->
		<view class="bg-white margin-lr radius padding-lr">
			<view class="cu-bar  text-lg tet-bold">银行卡信息</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder-class="input-holder" placeholder="请输入姓名" v-model="formData.realname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">电话</view>
				<input placeholder-class="input-holder" placeholder="请输入电话号" v-model="formData.mobile"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">银行卡号</view>
				<input placeholder-class="input-holder" placeholder="请输入银行卡号" v-model="formData.account_number"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">开户行</view>
				<input placeholder-class="input-holder" placeholder="请输入开户行" v-model="formData.bank_name"></input>
			</view>
		</view>
		<view class="margin text-gray"><text class="text-red text-lg">*</text>默认办单时银行信息，若更换提现方式请联系客服</view>
		<view class="margin">
			<view class="margin-lr">
				<view class="w100 cu-btn bg-orange round lg" @tap="onSubmit">确认提现</view>
			</view>
		</view>
		<view class="text-gray text-center margin-top">请大于或等于1后即可提现</view>
		<view class="text-gray text-center margin-top-sm">手续费：1%</view>

		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<image src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/05/19/image_158987261998991015.png"
				 class="model-bg-img"></image>
				<view class="model-content">
					<view class="note">
						<view>您的提现申请已提交成功！</view>
						<view>工作人员将在1-2个工作日进行审核</view>
					</view>
					<view class="cu-bar bg-white btn-text">
						<button class="cu-btn bg-orange round lg" @click="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				modalName: null,
				accountInfo: null,
				formData: {
					cash: '0.00',
					realname: '',
					mobile: '',
					account_number: '',
					bank_name: ''
				},
				withdraw: null,
				member: null,
				// payment_index: 0,
				// paymentPicker: ['微信', '银行卡'],
			}
		},
		onLoad() {
			if (this.$common.loginAuth()) {
				this.$common.getMember().then((member) => {
					this.member = member
				})
				// this.$common.getConfig().then((config) => {
				// 	this.withdraw = config.withdraw
				// 	console.log(this.withdraw)
				// })
				// this.getInfo()
			}
		},
		onShow() {
			this.$common.loginAuth()
			// this.getInfo()
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				let _this = this
				_this.$http
					.get('integral_info', {})
					.then((response) => {
						console.log(response)
						if (response.data.code == 200) {
							_this.accountInfo = response.data.data
							uni.hideLoading()
						} else {
							this.$common.showError('获取失败:' + response.data.message, function() {
								uni.navigateBack({

								})
							})
						}
					})
					.catch((response) => {
						console.log(response)
					})
			},
			checkAll() {
				this.formData.cash = this.member.account.user_money
			},
			onSubmit(e) {
				let formData = this.formData
				formData.integral = parseInt(formData.integral)

				if (!formData.realname.trim()) {
					this.$common.showError('姓名不能为空')
					return
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(formData.mobile))) {
					this.$common.showError('请输入正确的电话号码')
					return
				}
				if (!formData.account_number.trim()) {
					this.$common.showError('银行卡号不能为空')
					return
				}
				if (!formData.bank_name.trim()) {
					this.$common.showError('开户行不能为空')
					return
				}
				console.log(formData)
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.post('withdraw', formData)
					.then((response) => {
						console.log(response)
						this.modalName = 'Image'
						uni.hideLoading()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			hideModal(e) {
				this.modalName = null;
				uni.navigateBack({})
			},
			PaymentPickerChange(e) {
				this.payment_index = e.detail.value
			},
		}
	}
</script>

<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .cu-form-group {
		padding: 0;
	}

	.white-box .big-title {
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		line-height: 90rpx;
	}

	.white-box .big-bold-title {
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-weight: bold;
		line-height: 90rpx;
	}

	.white-box .note {
		font-size: 22rpx;
		color: rgba(51, 51, 51, 1);
	}

	.cu-form-group .checkall {
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(251, 178, 64, 1);
	}

	.cu-form-group .left-input {
		text-align: left;
	}

	.cu-form-group .title {
		font-size: 30rpx;
		/* font-weight:bold; */
		color: #333333;
		line-height: 55rpx;
	}

	.cu-form-group .picker {
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group picker {
		margin-right: 0;
		/* padding-right: 20rpx; */
		text-align: right;
	}

	.cu-form-group .area-picker {
		padding-right: 0;
		font-size: 26rpx;
	}

	.cu-form-group .input-holder {
		text-align: right;
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group .left-input-holder {
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group input {
		text-align: right;
	}

	.tips {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		font-size: 24rpx;
		/* font-weight:bold; */
		color: #BEBEBE;
		line-height: 45rpx;
	}

	.tips text {
		color: #FF0000;
		margin-right: 10rpx;
	}

	button {
		width: 576rpx;
		margin: 88rpx 92rpx 0rpx;
	}

	.last-tips {
		text-align: center;
		font-size: 22rpx;
		color: #B3B3B3;
		margin-top: 24rpx;
	}

	.cu-modal .cu-dialog {
		width: 600rpx;
		height: 523rpx;
		background-color: #FFFFFF;
	}

	.cu-dialog .model-bg-img {
		width: 100%;
		height: 100%;
	}

	.cu-dialog .model-content {
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
	}

	.model-content .note {
		margin-top: 270rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(121, 121, 121, 1);
		line-height: 48rpx;
	}

	.model-content .note view {
		text-align: center;
	}

	.model-content .btn-text {}

	.model-content .btn-text button {
		margin: 40rpx 100rpx;
	}
</style>
